<template>
  <div class="main">
    <div class="wzlxzt">
      <div class="yghz">
        <div class="info">
          <p>
            hello，很荣幸你能认识我。
            <Tooltip content="友好的握手" placement="right" theme="light">
              <svg class="woshou ico" aria-hidden="true">
                <use xlink:href="#icon-tubiaozhizuomoban"></use>
              </svg>
            </Tooltip>
          </p>
          <h1>我叫 xxx</h1>
          <p>
            以前是一名
            <span style="
                background: linear-gradient(to right, #8be4be, #e7cbaa);
                color: #3077ff;
              ">&nbsp;后端程序员（java）</span>
          </p>
          <p style="margin-top: 10px">
            现在是
            <span style="
                background: linear-gradient(to right, #8be4be, #cee19b);
                color: #3077ff;
              ">&nbsp;唱跳boy&nbsp;</span>
          </p>
          <Tooltip content="我在安徽" placement="top" theme="light" class="addressTip">
            <svg class="icon addressIco" aria-hidden="true">
              <use xlink:href="#icon-dingwei"></use>
            </svg>
          </Tooltip>
        </div>
        <Card class="js">
          <h1>关于本站</h1>
          <div style="font-size: 15px; margin-bottom: 20px">
            一款
            <Tooltip content="vue3" placement="bottom" theme="light" style="color: rgb(235, 88, 31)">前(vue3)
            </Tooltip>
            <Tooltip content="springboot" placement="bottom" theme="light" style="color: rgb(0, 200, 250)">后(java)
            </Tooltip>
            端分离的博客系统，在我不断地复制粘贴、复制粘贴，又复制粘贴的努力下，它（ADU博客）终于问世啦~
          </div>
          <div class="scrolling-text">
            小伙伴们大家好，我是练习时长两年半的程序猿，喜欢复制、粘贴，在今后的日子中，我还会将此博客继续完善、改进，期待的话可以互换友联，或者收藏博客。
          </div>

          <transition name="fade">
            <div class="jineng" v-if="jinengState">
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/java.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>JAVA</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/css3.jpg"
                  style="background-color: #fff; margin-right: 5px" />
                <p>CSS</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/maven.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>maven</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/mysql.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>mysql</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/redis.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>redis</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/spring.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>spring</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/Vue.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>vue</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/js.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>JavaScript</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/git.webp"
                  style="background-color: red; margin-right: 5px" />
                <p>git</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/html.png"
                  style="background-color: red; margin-right: 5px" />
                <p>Html</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/mybatis.svg"
                  style="background-color: #fff; margin-right: 5px" />
                <p>mybatis</p>
              </div>
              <div class="jinengItem">
                <Avatar icon="ios-person" size="small" src="/toolIco/jquery.png"
                  style="background-color: #fff; margin-right: 5px" />
                <p>jquery</p>
              </div>
            </div>
          </transition>
        </Card>
        <div class="jsZz" @mouseover="mouseoverJs" @mouseout="mouseoutJs"></div>
      </div>

      <div class="yghz">
        <div class="sj"></div>
        <div class="sjDIv">
          <h1>访问统计</h1>
          <div class="dateDiv" v-if="visitData">
            <div>
              <p>今日访问</p>
              <h1>{{ visitData.todayCount }}</h1>
            </div>

            <div>
              <p>昨日访问</p>
              <h1>{{ visitData.yesterdayCount }}</h1>
            </div>

            <div>
              <p>本月访问</p>
              <h1>{{ visitData.thisMonthCount }}</h1>
            </div>

            <div>
              <p>总访问</p>
              <h1>{{ visitData.totalCount }}</h1>
            </div>
          </div>
        </div>
        <svg class="cheIco" aria-hidden="true">
          <use xlink:href="#icon-gaojipaoche"></use>
        </svg>

        <div class="game">
          <video autoplay loop muted playsinline class="gamevideo">
            <source src="/lol/1.mp4" type="video/mp4" />
          </video>

          <div class="fontLol">
            <el-carousel height="50px" direction="vertical" indicator-position="none">
              <el-carousel-item v-for="item in lolDate" :key="item.id">
                <span>{{ item.content }}
                  <span style="margin-left: 40px">--{{ item.figure }}</span>
                </span>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="toggle-cont gameIco">
            <input @click="paly" class="toggle-input" id="toggle" name="toggle" type="checkbox" />
            <label class="toggle-label" for="toggle">
              <div class="cont-label-play">
                <span class="label-play"></span>
              </div>
            </label>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: space-between">
        <!-- 运行时间 -->
        <div id="yxTime">
          <RunningTime />
        </div>

        <!-- 打劫  -->
        <div id="dajie">
          <img src="/dj/dj.png" width="150px" />
          <img src="/dj/jsm.png" width="200px" style="margin: 0 50px" />

          <button id="djan" @click="djan">
            <div class="svg-wrapper-1">
              <div class="svg-wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                  <path fill="none" d="M0 0h24v24H0z"></path>
                  <path fill="currentColor"
                    d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z">
                  </path>
                </svg>
              </div>
            </div>
            <span>查看</span>
          </button>

          <div id="DJDiv">
            <video id="DJVideo">
              <source src="/dj/dog.mp4" type="video/mp4" />
            </video>
          </div>
        </div>
      </div>

      <Card class="dashang">
        <span style="color: #838383">致谢</span>
        <div style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <h1>打赏名单</h1>
          <Beg />
        </div>
        <p>感谢打赏的小伙伴，打赏金额随意，一分钱也是支持我不断前进的动力。</p>

        <div style="display: flex; flex-wrap: wrap" v-if="variable.begData.value">
          <Card style="width: 200px; margin: 20px 20px 10px 0" v-for="item in variable.begData.value.records"
            :key="item.id">
            <div class="zsLi">
              <div style="font-size: 20px; font-weight: 700">
                {{ item.name }}
              </div>
              <div style="
                  display: flex;
                  justify-content: space-between;
                  margin-top: 10px;
                ">
                <p class="moneyClass">￥{{ item.money }}</p>
                <Time :time="item.creationTime" :interval="1" />
              </div>
            </div>
          </Card>
        </div>
      </Card>

      <div class="comment" style="background-color: #fff; padding: 20px">
        <p style="font-size: 20px; margin-bottom: 10px">
          <Icon type="ios-chatbubbles" />留言
        </p>
        <div id="yjplk">
          <Comment type="About" />
          <Spin fix :show="variable.yjplkZz.value">回复评论中...</Spin>
        </div>
        <CommentList type="About" />
      </div>
    </div>
  </div>
</template>
<script setup>
  const axios = inject("axios");
  import variable from "../../js/variable";
  import Comment from "./Comment.vue";
  import CommentList from "./CommentList.vue";
  const Beg = defineAsyncComponent(() => import("./Beg.vue"));
  import RunningTime from "./RunningTime.vue";

  const jinengState = ref(false); //技能状态
  const visitData = ref(null); //访问数据
  const gameMusic = ref(true); //lol音乐播放ico状态
  const lolDate = ref(null); //lol台词数据

  //技能
  function mouseoverJs () {
    jinengState.value = true;
  }
  function mouseoutJs () {
    jinengState.value = false;
  }

  // 查询数据
  function findData () {
    axios
      .get("other/findVisit")
      .then((response) => {
        let res = response.data;
        if (res.code == 200) {
          visitData.value = res.data;
        }
      })
      .catch();
  }

  //-----------------------------lol------------------
  function paly () {
    if (gameMusic.value) {
      variable.musciList.value.forEach((item) => {
        if (item.name == "孤勇者") {
          gameMusic.value = false;
          variable.song.value = item;
          setTimeout(() => {
            document.getElementById("videoMusicId").play(); //播放
          }, 0);
          return;
        }
      });
    } else {
      gameMusic.value = true;
      document.getElementById("videoMusicId").pause(); //暂停
    }
  }

  //查询台词
  function findLol () {
    axios
      .post("lol/findLOL", { pageSize: 100 })
      .then((response) => {
        let res = response.data;
        if (res.msg == "成功" && res.data) {
          lolDate.value = res.data.records;
        }
      })
      .catch();
  }

  //-----------------------------lol------------------

  //打劫按钮
  const djan = () => {
    //弹出视频
    document.getElementById("DJDiv").style.display = "block";
    document.getElementById("DJDiv").volume = 0.5;
    document.getElementById("DJVideo").play();
    setTimeout(() => {
      document.getElementById("DJDiv").style.display = "none";
    }, 7500);
  };

  onMounted(() => {
    findLol();
    findData();
  });
</script>

<style scoped>
  .loltaici {
    display: flex;
    border: 1px solid red;
  }

  .main {
    user-select: none;
    width: 100%;
    margin-top: 70px;
    background-color: #f7f9fe;
    display: flex;
    min-height: 800px;
  }

  .wzlxzt {
    width: 75%;
    margin: 30px auto 0;
    border-radius: 5px;
    box-shadow: 0 8px 16px -4px #2c2d300c;
    letter-spacing: 1px;
  }

  .yghz {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 40px 0;
  }

  .info {
    background: linear-gradient(to right, #3077ff, #549bff);
    width: 49%;
    color: #fff;
    padding: 20px;
    border-radius: 20px;
    letter-spacing: 1px;
    position: relative;
  }

  .woshou {
    width: 40px;
    height: 40px;
    vertical-align: -0.3em;
  }

  .addressIco {
    width: 50px;
    height: 50px;
  }

  .cheIco {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 30px;
    animation: moveAndRotate 15s linear infinite;
  }

  @keyframes moveAndRotate {
    0% {
      transform: translateX(0) scaleX(1);
    }

    49% {
      transform: translateX(500px) scaleX(1);
    }

    50% {
      transform: translateX(500px) scaleX(-1);
    }

    100% {
      transform: translateX(0) scaleX(-1);
    }
  }

  .addressTip {
    position: absolute;
    right: 100px;
    top: 100px;
  }

  .js {
    width: 49%;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
  }

  .jsZz {
    width: 47%;
    height: 192px;
    position: absolute;
    right: 30px;
  }

  .scrolling-text {
    white-space: nowrap;
    position: absolute;
    bottom: 10px;
    animation: scrollText 20s linear infinite;
  }

  @keyframes scrollText {
    0% {
      left: 100%;
    }

    100% {
      left: -160%;
    }
  }

  .jineng {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  .jinengItem {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    background-color: #f7f7f7;
    border: 1px solid rgb(224, 224, 224);
    border-radius: 20px;
    height: 35px;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 10px;
  }

  .sj {
    border-radius: 20px;
    width: 40%;
    height: 378px;
    background-image: url(/other/640dc8c72f623.webp);
    color: #fff;
    position: relative;
  }

  .sj::after {
    box-shadow: 0 -159px 173px 71px #0f1114 inset;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 20px;
  }

  .sjDIv {
    position: absolute;
    color: #fff;
    top: 60px;
    left: 60px;
  }

  .sjDIv h1 {
    font-size: 40px;
  }

  .sjDIv p {
    font-size: 10px;
    color: #c4c4c4;
  }

  .dateDiv {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
  }

  .dateDiv>div {
    width: 50%;
  }

  h1 {
    padding: 0 0 10px;
  }

  p {
    font-size: 16px;
  }

  .zs {
    display: flex;
    flex-wrap: wrap;
  }

  .zs>li {
    width: 50%;
    font-size: 15px;
    padding-bottom: 10px;
  }

  .dashang {
    background-color: #fff;
    border-radius: 20px;
    width: 100%;
    margin: 20px 0 100px 0;
  }

  .game {
    border-radius: 20px;
    width: 55%;
    background-image: url(/other/lol2.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 20px;
    color: #fff;
    position: relative;
  }

  .gamevideo {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* 调整视频大小以填充容器 */
    object-fit: cover;
  }

  .lolimg {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .fontLol {
    position: absolute;
    top: 200px;
    left: 170px;
    width: 100%;
  }

  .game>h1 {
    letter-spacing: 5px;
  }

  .gameIco {
    position: absolute;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
  }

  .icon {
    animation: rotate 1s infinite;
  }

  @keyframes rotate {
    0% {
      transform: translateX(-5px) rotate(0deg);
    }

    50% {
      transform: translateX(5px) rotate(5deg);
    }

    100% {
      transform: translateX(-5px) rotate(0deg);
    }
  }

  .ico {
    animation: jump 0.5s infinite;
  }

  @keyframes jump {

    0%,
    100% {
      transform: translateX(0);
    }

    25% {
      transform: translateX(-1px) rotate(-3deg);
    }

    50% {
      transform: translateX(1px) rotate(3deg);
    }

    75% {
      transform: translateX(-1px) rotate(-3deg);
    }
  }

  /* 赞赏 */

  .zsLi {
    height: 50px;
  }

  .zsLi>div {
    width: 100%;
    height: 50%;
  }

  .moneyClass {
    background-color: #e5a80d;
    color: #fff;
    border-radius: 5px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 20px;
    height: 20px;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }

  /* -----------评论START-------------- */
  .comment>h2 {
    padding: 70px 0 20px;
  }

  #yjplk {
    position: relative;
  }

  /* -----------评论END-------------- */

  @media (max-width: 1400px) {
    #dajie {
      display: none !important;
    }

    #yxTime {
      width: 100%;
    }
  }

  @media (max-width: 1000px) {
    .wzlxzt {
      width: 90%;
    }

    .yghz {
      flex-direction: column;
    }

    .info {
      width: 100%;
    }

    .js {
      width: 100%;
      margin-top: 20px;
    }

    .jsZz {
      display: none;
    }

    .scrolling-text {
      bottom: 0;
    }

    .addressTip {
      display: none;
    }

    .sj {
      width: 100%;
    }

    .sjDIv {
      top: 20px;
      left: 10px;
    }

    .game {
      display: none;
    }
  }

  /* —-----------游戏音乐播放按钮--------------------- */
  .toggle-cont {
    width: 100px;
    height: 50px;
    border-radius: 9999px;
  }

  .toggle-cont .toggle-input {
    display: none;
  }

  .toggle-cont .toggle-label {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 6px;
    width: 100%;
    height: 100%;
    background: #272727;
    border: 1px solid rgb(134, 134, 134);
    border-radius: 9999px;
    box-sizing: content-box;
    box-shadow: 0px 0px 16px -8px #fefefe;
  }

  .toggle-cont .toggle-label .cont-label-play {
    position: relative;
    width: 50px;
    aspect-ratio: 1 / 1;
    background: #5e5e5e;
    border-radius: 9999px;
    transition: all 0.5s cubic-bezier(1, 0, 0, 1);
  }

  .toggle-cont .toggle-input:checked+.toggle-label .cont-label-play {
    background: #f43f5e;
    transform: translateX(50px);
  }

  .toggle-cont .toggle-label .label-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 24px;
    aspect-ratio: 1 / 1;
    background: #fefefe;
    border-radius: 4px;
    clip-path: polygon(25% 0, 75% 50%, 25% 100%, 25% 51%);
    transition: all 0.5s cubic-bezier(1, 0, 0, 1);
  }

  .toggle-cont .toggle-input:checked+.toggle-label .label-play {
    width: 20px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  /* —-----------游戏音乐播放按钮end--------------------- */

  /* -------------------打劫------------------ */
  #dajie {
    padding-right: 20px;
    height: 150px;
    border-radius: 10px;
    background-color: rgb(113, 120, 223);
    display: flex;
    align-items: center;
  }

  #djan {
    height: 50px;
    font-family: inherit;
    font-size: 20px;
    background: rgb(113, 120, 223);
    color: white;
    padding: 0.7em 1em;
    padding-left: 0.9em;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s;
    cursor: pointer;
  }

  #djan span {
    display: block;
    margin-left: 0.3em;
    transition: all 0.3s ease-in-out;
  }

  #djan svg {
    display: block;
    transform-origin: center center;
    transition: transform 0.3s ease-in-out;
  }

  #djan:hover .svg-wrapper {
    animation: fly-1 0.6s ease-in-out infinite alternate;
  }

  #djan:hover svg {
    transform: translateX(1.2em) rotate(45deg) scale(1.1);
  }

  #djan:hover span {
    transform: translateX(5em);
  }

  #djan:active {
    transform: scale(0.95);
  }

  @keyframes fly-1 {
    from {
      transform: translateY(0.1em);
    }

    to {
      transform: translateY(-0.1em);
    }
  }

  #DJDiv {
    z-index: 999999;
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
  }

  #DJVideo {
    width: 30vw;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* -------------------打劫end------------------ */
</style>